import React, { useState, useEffect } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    HomeOutlined,
    UserOutlined,
    VideoCameraOutlined,
    DashboardOutlined,
    ProductOutlined,
    LogoutOutlined,
    StarOutlined,
    AppstoreAddOutlined,
    FireOutlined,
    ToolOutlined,
    EnvironmentOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Breadcrumb, Space, message } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';

import { ReactComponent as LogoutIcon } from '@/assets/images/icons/LogoutIcon.svg';
import { logout } from '@/api/auth';
import { storage } from '@/utils';

const { Header, Sider, Content } = Layout;
/*
 * @Author: Eli.Chen
 * @Date: 2025-03-12 12:01:11
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-03-12 14:55:24
 * @Description: 控制台
 */

function AdminController() {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const navigate = useNavigate(); // 获取路由跳转方法
    const location = useLocation(); // 获取当前路由信息
    const [breadcrumb, setBreadcrumb] = useState('数据看板');

    useEffect(() => {
        switch (location.pathname) {
            case '/adminController':
                setBreadcrumb('数据看板');
                break;
            case '/adminController/homeMan':
                setBreadcrumb('首页展示信息管理');
                break;
            case '/adminController/cultPopMan':
                setBreadcrumb('科普专区管理');
                break;
            case '/adminController/userMan':
                setBreadcrumb('用户管理');
                break;
            // case '/adminController/userWorkReview':
            //   setBreadcrumb('用户作品审核');
            //   break;
            case '/adminController/recommend/postMan':
                setBreadcrumb('发布管理');
                break;
            case '/adminController/recommend/foodMan':
                setBreadcrumb('地方特色美食管理');
                break;
            case '/adminController/recommend/craftMan':
                setBreadcrumb('传统手工艺管理');
                break;
            case '/adminController/recommend/scenicMan':
                setBreadcrumb('景点管理');
                break;
            default:
                // 可添加默认情况处理
                break;
        }
    }, [location.pathname]);

    const handleLogout = () => {
        // 这里添加退出登录逻辑，例如：
        // 1. 清除token
        // 2. 跳转到登录页
        logout().then(() => {
            storage.clearAuthStorage();
            navigate('/auth/admin/login');
            message.success('退出成功！');
        });
    };

    return (
        <Layout
            style={{
                height: '100vh',
            }}
        >
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        height: '100%',
                        position: 'relative',
                    }}
                >
                    <div className="demo-logo-vertical" />
                    <Menu
                        theme="dark"
                        mode="inline"
                        selectedKeys={[location.pathname]}
                        items={[
                            {
                                key: '/adminController',
                                icon: <DashboardOutlined />,
                                label: '数据看板',
                            },
                            {
                                key: '/adminController/homeMan',
                                icon: <HomeOutlined />,
                                label: '首页展示信息管理',
                            },
                            {
                                key: '/adminController/cultPopMan',
                                icon: <VideoCameraOutlined />,
                                label: '科普专区管理',
                            },
                            {
                                key: '/adminController/userMan',
                                icon: <UserOutlined />,
                                label: '用户管理',
                            },
                            // {
                            //   key: '/adminController/userWorkReview',
                            //   icon: <ProductOutlined />,
                            //   label: '用户作品审核'
                            // },
                            {
                                key: '/adminController/recommend',
                                icon: <StarOutlined />,
                                label: '推荐管理',
                                children: [
                                    {
                                        key: '/adminController/recommend',
                                        icon: <AppstoreAddOutlined />,
                                        label: '发布作品',
                                    },
                                    {
                                        key: '/adminController/recommend/foodMan',
                                        icon: <FireOutlined />,
                                        label: '地方特色美食管理',
                                    },
                                    {
                                        key: '/adminController/recommend/tradCraftMan',
                                        icon: <ToolOutlined />,
                                        label: '传统手工艺管理',
                                    },
                                    {
                                        key: '/adminController/recommend/touristMan',
                                        icon: <EnvironmentOutlined />,
                                        label: '景点管理',
                                    },
                                ],
                            },
                            // {
                            //   key: '/adminController/recommend',
                            //   icon: <StarOutlined />,
                            //   label: '推荐管理',
                            //   children: [
                            //     {
                            //       index: true,
                            //       icon: <AppstoreAddOutlined />,
                            //       label: '发布管理',
                            //     },
                            //     {
                            //       key: 'foodMan',
                            //       icon: <FireOutlined />,
                            //       label: '地方特色美食管理',
                            //     },
                            //     {
                            //       key: 'tradCraftMan',
                            //       icon: <ToolOutlined />,
                            //       label: '传统手工艺管理',
                            //     },
                            //     {
                            //       key: 'touristMan',
                            //       icon: <EnvironmentOutlined />,
                            //       label: '景点管理',
                            //     }
                            //   ]
                            // }
                        ]}
                        onClick={({ key }) => navigate(key)}
                        style={{ flex: 1 }}
                    />

                    <Button
                        type="link"
                        danger
                        style={{
                            width: '100%',
                            height: 64,
                            borderRadius: 0,
                            color: 'rgba(255, 255, 255, 0.65)',
                            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
                        }}
                        onClick={handleLogout}
                    >
                        {collapsed ? (
                            // <LogoutOutlined />
                            <LogoutIcon
                                style={{
                                    width: 16,
                                    height: 16,
                                }}
                            />
                        ) : (
                            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                <LogoutIcon
                                    style={{
                                        width: 16,
                                        height: 16,
                                    }}
                                />
                                退出登录
                            </span>
                        )}
                    </Button>
                </div>
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                >
                    <Space flexDirection="row">
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                        <Breadcrumb
                            items={[
                                {
                                    title: '管理中心',
                                },
                                {
                                    title: breadcrumb,
                                },
                            ]}
                        />
                    </Space>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        overflow: 'auto',
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    );
}
export default AdminController;
